<template>
  <div class="page-distribute">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>创建分发任务</span>
      </div>
      <el-form ref="form" :model="distributeForm" label-width="80px">
        <el-form-item label="任务名称" label-width="120px">
          <el-input v-model="distributeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="是否挂载小黄车" label-width="120px">
          <el-select v-model="distributeForm.isMountCar" placeholder="请选择活动区域">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="团长链接" label-width="120px"
                      v-if="distributeForm.isMountCar">
          <el-row>
            <el-col :span="12"><el-input v-model="distributeForm.goodsLink"></el-input></el-col>
            <el-col :span="1" ><div>&nbsp;</div></el-col>
            <el-col :span="11"><el-button type="primary" @click="distributeForm.isShowCommission = true">提交链接</el-button></el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="color: red">
              ！非团长链接则无法提交发布任务，需报名
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="佣金比例" label-width="120px"
                      v-if="distributeForm.isShowCommission && distributeForm.isMountCar">
          <el-input v-model="distributeForm.commission"></el-input>
        </el-form-item>
        <el-form-item label="发布小红书" label-width="120px">
          <el-checkbox-group v-model="distributeForm.redBookList">
            <el-checkbox label="增值服务 A"></el-checkbox>
            <el-checkbox label="增值服务 B"></el-checkbox>
            <el-checkbox label="增值服务 C"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="样板视频" label-width="120px">
          <el-row v-if="distributeForm.videoList.length != 0">
            <div class="video-list">
              <div v-for="(videoUrl, i) in distributeForm.videoList" :key="videoUrl">
                <video :src="videoUrl" alt="" controls></video>
                <span class="close" @click="cancelVideo(i)">x</span>
              </div>
            </div>
          </el-row>
          <el-upload
              :action="BASE_API_URL+'baseapi/wechart/uploadMerchantPushImg'"
              :show-file-list="false"
              :data="uploadVideo"
              :multiple="true"
              list-type="picture-card"
              :on-success="handleSuccessUrl">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="产品卖点" label-width="120px">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="distributeForm.productText"
              maxlength="200"
              show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="推广文案" label-width="120px">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="distributeForm.extensionText"
              maxlength="200"
              show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="温馨提示" label-width="120px">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="distributeForm.tipsText"
              maxlength="200"
              show-word-limit
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="createTask">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Distribute",
  data() {
    return {
      distributeForm: {
        name: "",
        isMountCar: false,
        goodsLink: "",
        isShowCommission: false,
        commission: "",
        redBookList: ['增值服务 A'],
        productText: "",
        extensionText: "",
        tipsText: "",
        videoShow: true,
        videoList: [
            // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
            // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
            // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
            // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
        ]
      },
      uploadVideo: {
        area: "video"
      }
    }
  },
  methods: {
    handleSuccessUrl(res, file) {
      if(res.code == 1){
        this.distributeForm.videoList.push(res.msg)
      }else{
        this.$message.error('视频上传失败，请重新上传！')
      }
    },
    cancelVideo(i) {
      this.distributeForm.videoList.splice(i, 1)
      this.$message.success("移除视频成功")
    },
    createTask() {
      let obj = {
        name: "",
        isMountCar: false,
        goodsLink: "",
        isShowCommission: false,
        commission: "",
        redBookList: ['增值服务 A'],
        productText: "",
        extensionText: "",
        tipsText: "",
        videoShow: true,
        videoList: [
          // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
          // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
          // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
          // 'https://qiniuyun.pahpp.cn/video/5e63f202107031017217039.mp4',
        ]
      }
      this.distributeForm = obj
      this.$message.success("创建分发任务成功")
    }
  }
}
</script>

<style lang="less">
.page-distribute{
  .video-list {
    display: flex;
    flex-direction: row;
    width: 100%;

    >div {
      display: flex;
      width: 250px;
      margin: 0 20px 20px 0;

      video {
        width: 85%;
      }

      .close {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px;
        text-align: center;
        border-radius: 50%;
        color: #ccc;
        border: 2px solid #ccc;

        &:hover {
          cursor: pointer;
          color: #333333;
          border-color: #333;
        }
      }
    }
  }
}
</style>
